<template>
  <div class="child">
    <h1>作用于插槽</h1>
    <ul>
      <!--作用域插槽:可以将数据回传给父组件 -->
      <li v-for="(item, index) in todos" :key="item.id">
        <slot :$row="item" :$index="index"></slot>
      </li>
      <!-- <slot :data="data" :index="index"></slot> -->
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const props = defineProps(["todos"]);

// const data = reactive([
//   "zhangsan",
//   "lisi",
//   "wanwu",
//   "zhaoliu",
//   "tianqi",
//   "xiaoba",
// ]);

// const index = reactive([1, 2]);
</script>

<style scoped>
.child {
  margin-top: 300px;
  width: 40vw;
  height: 200px;
  background: #ddd;
}
</style>
